<script setup>
import { ref } from 'vue'

const props = defineProps({
    label: {
        type: String,
        default: '文本内容'
    },
    modelValue: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: '请输入文本内容'
    },
    keyName: {
        type: String,
        default: 'text'
    },
    // 是否在点击遮罩层后关闭
    closeOnClickOverlay: {
        type: Boolean,
        default: true
    },
    // 遮罩层样式
    overlayStyle: {
        type: Object,
    },
    selectList: {
        type: Array,
        default: []
    },
    // 文本域样式
    textareaStyle: {
        type: Object,
        default: {}
    }
})

const emits = defineEmits(['update:modelValue', 'click-overlay', 'input', 'clearSelectItem', 'clickSelectItem'])

const selectShow = ref(false)

// 点击选中项
function clickSelectItem(item) {
    emits('clickSelectItem', item)
}

// 删除选中项
function clearSelectItem(item) {
    emits('clearSelectItem', item)
}

// 文本域输入事件
function input(e) {
    emits('update:modelValue', e.target.value)
    emits('input', e)
}

// 清除文本
function clearText() {
    emits('update:modelValue', '')
}

// 点击遮罩层
function clickOverlay() {
    if (props.closeOnClickOverlay) {
        selectShow.value = false
    }
    emits('click-overlay')
}


function records() {
    selectShow.value = true
}

</script>

<template>
    <div class='my-textarea'>
        <div class="label_box">
            <slot name="label">
                <div class="label">{{ label }}</div>
            </slot>
            <slot name="value">
                <div class="value">
                    <span @click="records" class="value_item">
                        <i class="iconfont ai-icon-lishi"></i>
                        文案记录</span>
                    <span @click="clearText" class="value_item">
                        <i class="iconfont ai-icon-qingchuwenben"></i>
                        清除文本</span>
                </div>
            </slot>
        </div>
        <textarea :style="textareaStyle" :value="modelValue" :placeholder="placeholder" :maxlength="-1" @input="input"
            class="teatarea"></textarea>
        <div class="select_box">
            <div class="select_overlay" :style="[overlayStyle]" v-if="selectShow" @click="clickOverlay"></div>
            <div class="select_content" :class="{ show: selectShow }">
                <div class="select_item" v-if="selectList.length" v-for="item of selectList" @click="clickSelectItem(item)">
                    <div class="text">{{ item[keyName] }}</div>
                    <div class="icon_box">
                        <i class="iconfont ai-icon-close" @click.stop="clearSelectItem(item)"></i>
                    </div>
                </div>
                <div v-else class="noText">暂无最新数据...</div>
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.my-textarea {
    position: relative;

    .label_box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .label {
            font-size: 28rpx;
            color: #FFFFFF;
            position: relative;
            padding-left: 24rpx;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
                width: 12rpx;
                height: 18rpx;
                background: #83CD88;
                border-radius: 6rpx;
            }
        }

        .value {
            display: flex;
            align-items: center;
            gap: 33rpx;
            font-size: 24rpx;
            color: #FFFFFF;

            .value_item {
                display: flex;
                align-items: center;
                gap: 6rpx;

                .iconfont {
                    font-size: 26rpx;
                }
            }
        }
    }

    .teatarea {
        box-sizing: border-box;
        padding: 20rpx 24rpx;
        width: 100%;
        height: 340rpx;
        background: #444072;
        border-radius: 20rpx;
        margin-top: 21rpx;
        font-size: 28rpx;
        color: #FFF;
    }

    .select_box {
        .select_overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9;
        }

        .select_content {
            box-sizing: border-box;
            position: absolute;
            top: 55rpx;
            left: 0;
            width: 100%;
            height: 0;
            padding: 0 24rpx;

            background-color: #444072;
            border-radius: 20rpx;
            transition: all 0.3s;
            z-index: 10;
            overflow: scroll;

            &::-webkit-scrollbar {
                display: none;
            }

            &.show {
                height: 340rpx;
                box-shadow: 0 4rpx 8rpx rgba(255, 255, 255, 0.2);
            }

            .select_item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #FFF;
                font-size: 28rpx;
                padding: 24rpx 0;
                border-bottom: 1rpx solid #FFF;

                &:last-child {
                    margin-bottom: 20rpx;
                }

                .text {
                    flex: 1;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .icon_box {
                    flex-shrink: 0;
                    width: 100rpx;
                    text-align: right;

                    .iconfont {
                        font-size: 26rpx;
                    }
                }
            }

            .noText {
                color: #FFF;
                font-size: 28rpx;
                text-align: center;
                padding: 20rpx 0;
                border-bottom: 1rpx solid #666;

            }
        }
    }
}
</style>